<template>
  <div style="width: 70%; margin: auto">
    <el-card class="box-card">
      <div id="page1" class="Card_Div">
        <span style="color: cornflowerblue; font-size: 20px; line-height: 50px"
          >&nbsp;&nbsp;&nbsp;项目信息</span
        >
        <hr />
        <el-form label-width="150px" :model="ProjectInfor">
          <el-row>
            <el-col :span="24"
              ><el-form-item label="项目名称:">
                <el-input
                  class="input_Fill_90"
                  v-model="ProjectInfor.projectName"
                ></el-input> </el-form-item
            ></el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="12"
              ><el-form-item label="项目编号"
                ><el-input
                  v-model="ProjectInfor.projectNumber"
                  class="input_Fill_50"
                  placeholder=""
                ></el-input></el-form-item
            ></el-col>
            <el-col :span="12"
              ><el-form-item label="项目负责人"
                ><el-input
                  v-model="ProjectInfor.projectPerson"
                  class="input_Fill_50"
                  placeholder=""
                ></el-input></el-form-item
            ></el-col>
          </el-row>
          <br />
          <el-row>
            <el-col :span="12">
              <el-form-item label="项目总经费(万元)"
                ><el-input
                  v-model="ProjectInfor.projectMoney"
                  class="input_Fill_50"
                  placeholder=""
                ></el-input></el-form-item
            ></el-col>
            <!-- <el-col :span="12">
              <el-form-item label="剩余可报销经费(万元)"
                ><el-input
                  v-model="ProjectInfor.ProjectNumber"
                  class="input_Fill_50"
                  placeholder=""
                ></el-input></el-form-item
            ></el-col> -->
          </el-row>
        </el-form>
      </div>
      <el-tabs v-model="tabName">
        <el-tab-pane
          :key="item.name"
          v-for="item in tableTabs"
          :label="item.title"
          :name="item.name"
          class="tab-pane"
        >
          <div v-if="item.name === 'form'">
            <form-builder
              ref="formBuilder"
              v-model="formVal"
              :buildData="formCode"
              v-if="itemList.length > 0"
            />
            <div style="margin-bottom: 15px; text-align: center">
              <el-button type="primary" class="button" @click="handlerSubForm"
                >提交</el-button
              >
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import JSONPath from "JSONPath";
import formBuilder from "@/components/formBuilder";
import formViewer from "@/components/formViewer";
import { codemirror } from "vue-codemirror";
// 核心样式
import "codemirror/lib/codemirror.css";
// 引入主题后还需要在 options 中指定主题才会生效
import "codemirror/theme/dracula.css";
import "codemirror/mode/javascript/javascript";
const options = {
  tabSize: 2, // 缩进格式
  theme: "dracula", // 主题，对应主题库 JS 需要提前引入
  lineNumbers: true, // 显示行号
  line: true,
  styleActiveLine: true, // 高亮选中行
  hintOptions: {
    completeSingle: true, // 当匹配只有一项的时候是否自动补全
  },
};
export default {
  components: {
    formBuilder,
    codemirror,
    formViewer,
  },
  data() {
    return {
      formCode: "",
      formVal: "",
      formEditVal: "",
      formEditCode: "",
      tabName: "form",
      tableTabs: [
        {
          title: "",
          name: "form",
        } /*{
          title: '配置',
          name: 'config',
        },*/ /*{
          title: '数据',
          name: 'value',
        }*/,
      ],
      codeMirror: options,
      ProjectInfor: {
        projectName: "",
      },
    };
  },
  mounted() {
    // this.$nextTick(() => {
    // });
  },
  created() {
    this.GetProjectInfor();
    this.GetFormCode();
  },
  methods: {
    handlerchangeopen() {},
    editFormData() {
      this.formEditCode = this.formCode;
      this.formEditVal = this.formVal;
    },
    GetFormCode() {
      this.$axios
        .post(
          "http://localhost:9991/api/tb_project_subjectexpensedetailinfo/GetSubjectExpenseInfo?SubjectId=" +
            this.$route.query.SubjectId
        )
        .then((res) => {
          console.log(res)
          var list = JSON.parse(JSON.parse(res.data.data.jsonAllValue).list);
          var config = JSON.parse(res.data.data.jsonAllValue).config;
          var obj = {
            config: config,
            list: list,
          };
          this.formCode = JSON.stringify(obj, null, 4);
        });
    },
    GetProjectInfor() {
      this.$axios
        .get(
          "http://localhost:9991/api/tb_project_baseinfo/BaseinfoSearch?projectId=" +
            this.$route.query.ProjectId
        )
        .then((res) => {
          //console.log(res.data);
          this.ProjectInfor = res.data.data[0];
          //console.log(this.ProjectInfor);
        });
    },
    //提交
    handlerSubForm() {
      console.log(JSON.stringify(this.formCode))
      // console.log(this.itemList)
      this.$refs["formBuilder"][0].validate();
      if (this.formVal == "") {
        this.$message.error("验证未通过，请完善数据");
        return;
      }
      const value = JSON.parse(this.formVal);
      value.BarCode= this.$route.query.ProjectId
      console.log(value);
      //配套经费
      var supportMoney = JSONPath("", "$..supportMoney", value)[0];
      //专项经费
      var specialMoney = JSONPath("", "$..specialMoney", value)[0];
      console.log(supportMoney, specialMoney);
      debugger
      var info = {
        projecId: this.$route.query.ProjectId,
        subjectId: this.$route.query.SubjectId,
        subjectCostingInfo: JSON.stringify(value), //this.formVal,
        SupportMoney: supportMoney,
        SpecialMoney: specialMoney,
        //applyPageData:JSON.stringify(this.formCode)
      };
      this.$axios
        .post(
          "http://localhost:9991/api/tb_project_expensebaseinfo/InsertBudgetInfo",
          info
        )
        .then((res) => {
          if (res.status) {
            this.$message({
              type: "success",
              message: "保存成功",
            });
            setTimeout(() => {
              window.location.href = "http://localhost:9990/#/ApplyFor";
            }, 2000);
          }
        });
      // if (this.formVal !== "") {
      //   this.addNewTab();
      //   this.addEditTab();
      // }
    },
    addNewTab() {
      if (this.tableTabs.length < 4) {
        this.tableTabs.push({
          title: "查看表单",
          name: "view",
        });
      }
    },
    addEditTab() {
      if (this.tableTabs.length < 5) {
        this.tableTabs.push({
          title: "表单数据回显",
          name: "edit",
        });
      }
    },
  },
  computed: {
    itemList() {
      if (this.formCode !== "") {
        const form = JSON.parse(this.formCode);
        return form.list;
      } else {
        return [];
      }
    },
    code: {
      get() {
        if (this.tabName === "form") {
          return "";
        } else if (this.tabName === "config") {
          return this.formCode;
        } else {
          return this.formVal;
        }
      },
      set() {},
    },
  },
};
</script>

<style scoped>
/* .box-card >>> .el-tabs__header{
  margin: 0px 0px 0px 0px;
} */

.box-card {
  width: 60%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  overflow: auto;
  display: block;
}
#app {
  position: relative;
}
</style>